<template>
  <div>
    <div class="padding bg-white">
      <el-checkbox-group v-model="checked">
        <el-checkbox v-for="item in checkbox" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-table
      v-loading="loading" :data="lists"
      :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
    >
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'industry-table',
  props: {
    loading: Boolean,
    lists: Array,
  },
  data () {
    return {
      checked: ['electric', 'water', 'gas'],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    energyVariety () {
      return this.$store.state.energyVariety
    },
    checkbox () {
      return this.energyVariety
    },
    columns () {
      const checked = this.checked
      const electricConfig = [
        { label: '电力（亿千瓦时）', prop: 'electric' },
        { label: '同比（%）', prop: 'electricGrowth' },
      ]
      const waterConfig = [
        { label: '水（万立方米）', prop: 'water' },
        { label: '同比（%）', prop: 'waterGrowth' },
      ]
      const coalConfig = [
        { label: '煤炭（万吨）', prop: 'coal' },
        { label: '同比（%）', prop: 'coalGrowth' },
      ]
      const heatConfig = [
        { label: '热力（吉焦）', prop: 'hot' },
        { label: '同比（%）', prop: 'hotGrowth' },
      ]
      const oilsConfig = [
        { label: '油品（吉焦）', prop: 'oils' },
        { label: '同比（%）', prop: 'oilsGrowth' },
      ]
      const cokeConfig = [
        { label: '焦炭（吉焦）', prop: 'coke' },
        { label: '同比（%）', prop: 'cokeGrowth' },
      ]
      const gasConfig = [
        { label: '气体燃料（万立方米）', prop: 'gas' },
        { label: '同比（%）', prop: 'gasGrowth' },
      ]
      const otherConfig = [
        { label: '其他能源', prop: 'other' },
        { label: '同比（%）', prop: 'otherGrowth' },
      ]
      const columns = [
        { label: '行业', prop: 'area', width: 260 },
        { label: '能源消费总量（万吨标准煤）', prop: 'total', width: 200 },
        { label: '同比（%）', prop: 'totalGrowth' },
      ]
      const configs = {
        electric: electricConfig,
        coal: coalConfig,
        heat: heatConfig,
        coke: cokeConfig,
        oils: oilsConfig,
        gas: gasConfig,
        water: waterConfig,
        other: otherConfig,
      }
      const keys = Object.keys(configs).filter(key => checked.includes(key))
      return keys.reduce((acc, key) => {
        acc = acc.concat(configs[key])
        return acc
      }, columns)
    },
  },
  mounted () {
    return this.$store.dispatch('GET_ENERGY_VARIETY')
  },
}
</script>
